<template>
  <EcDialog v-model="dialogVisible" :auto-height="true" :show-fullscreen="false" class="form-dialog" @closed="handleClosed">
    <!-- 标题 -->
    <template #title>
      <div class="dialog-title">
        <SvgIcon icon="ep:upload-filled"/>
        文件上传
      </div>
    </template>

    <div style="padding-bottom: 15px">
      <span>图片大小限制：</span>
      <el-input-number v-model="fileSize" :max="100" :min="1" :step="1" controls-position="right"/>
    </div>
    <div>
      <UploadImageMultiple v-model="fileList" :file-size="fileSize" :server-upload="true" height="100px" width="100px"/>
    </div>

    <!-- 底部操作区域 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </span>
    </template>
  </EcDialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { SvgIcon } from '@/components/icon';
import { EcDialog } from '@/components/dialog';
import { UploadImageMultiple } from '@/components/upload';

defineOptions({name: 'SysOssConfig'});

const dialogVisible = ref(false); // 是否显示
const fileList = ref([]);
const fileSize = ref(20);

/** 打开弹窗 */
const open = async () => {
  dialogVisible.value = true;
  fileSize.value = 20;
  fileList.value = [];
}
// 提供 open 方法，用于打开弹窗
defineExpose({open});

/** 弹窗关闭触发 */
const emit = defineEmits(['refresh']);
const handleClosed = async () => {
  if (fileList.value && fileList.value.length > 0) {
    fileList.value = []
    emit('refresh')
  }
};

</script>

<style lang="scss" scoped>

</style>
